<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <input type="text" id="aaa"  value="Text field" />
  <div>
    <span>1</span>
    <span>2</span>
  </div>
  <script>
  const debounce = (func, wait ) => {
  // 缓存一个定时器id
  let timer;
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function() {
    if (timer) clearTimeout(timer)
     timer = setTimeout(() => {
      console.log(this,arguments);
      func.apply(this,arguments)
    }, wait)
  }
}
let bb = document.getElementById("aaa")
bb.addEventListener("input",debounce(OnInput,1000))
// bb.addEventListener("input",OnInput)
 function OnInput(e){
  console.log(this,e);
  console.log(111);
 }
 
 //节流
//  function jieliu(func, wait){
//    let timer;
//    return function() {
//     if (!timer) {
//       func.apply(this)
//       timer = setTimeout(() =>{
//          timer = null;
//        },wait)
//     }
//    }
//  }
//  let bb = document.getElementById("aaa")
// bb.addEventListener("input",jieliu(OnInput,2000))
// function OnInput(){
//   console.log(111);
//  }


 //时间戳节流
//  let usedate = function(func, wait){
   
//    let pre = 0;
//    return function(){
//       let now = new Date()
//      if (now-pre>wait) {
//      func()
//      pre =now
//      }
//    }
   
//  }
//  let bb = document.getElementById("aaa")
// bb.addEventListener("input",usedate(OnInput,2000))
// function OnInput(){
//   console.log(111);
//  }
  </script>
</body>
</html>